<template>
  <h1>练习</h1>
  <div>
    <table class="table table-bordered bg-primaty">
      <tbody>
        <tr>
          <td>ID</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>婚否</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in arrobj":key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.marry}}</td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
            <input type="button" value="上架" class="btn btn-primary" />
          </td>
        </tr>
      </tbody>
    </table>
    <hr/>
   <select>
    <option value="">请选择</option>
    <option :value="item.id" v-for="item in city":key="item.id">{{item.name}}</option>
   </select>
  </div>
</template>

<script setup lang="ts">
//v-on:表示绑定事件 v-on:click(事件类型)
//v-for:表示循环 v-for="(item,index) in 变量" item数值或对象中的元素 index表示索引值
//v-bind:单向绑定 用来绑定标签属性 value/class;
import {ref,reactive} from 'vue'
let arrobj = reactive ([
 {id:1,name:'张三',age:10,marry:false},
 {id:2,name:'李四',age:11,marry:false},
 {id:3,name:'赵三',age:12,marry:false},
 {id:4,name:'李三',age:13,marry:false},
 {id:5,name:'王三',age:14,marry:true},
])


let city =reactive([
  {id:1,name:'河北'},
  {id:2,name:'河南'},
  {id:3,name:'江西'},
  {id:4,name:'湖北'},
  {id:5,name:'湖南'},
])
</script>

<style scoped>

</style>